<template>
  <div>
    <elm-page-tb>
      <template #top>
        <el-input placeholder="请查询输入内容" size="mini" prefix-icon='el-icon-search' style="width:250px;" v-model="postData.remark" clearable></el-input>
        <right>
          <el-button-group>
            <el-button icon="el-icon-search" size="mini" @click="tablebinding(activeName)">查询</el-button>
            <elm-open-button :url="activeName+'_edit'"
                             :title="'新增【'+(activeName == 'settle_in'?'收入结算':'支出结算')+'】'"
                             width="900" height="90%">新增
            </elm-open-button>
          </el-button-group>
        </right>
      </template>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="收入结算" name="settle_in">
          <elm-table ref="settle_in" url="/business/bms/settlement/GetData" :post-data="postData" style="height: calc(100vh - 228px)">
            <el-table-column prop="js_code" label="结算编号" align="center" width="150"></el-table-column>
            <el-table-column prop="js_status" label="结算状态" align="center" width="80"></el-table-column>
            <el-table-column prop="js_amount" label="结算金额(万元)" align="center" width="120"></el-table-column>
            <el-table-column prop="js_date" label="结算时间" :formatter="formatDate" align="center" width="100"></el-table-column>
            <el-table-column prop="contract_id" label="所属合同" align="left" header-align="center"></el-table-column>
            <el-table-column prop="sk_person_name" label="跟进人" align="center"  width="120"></el-table-column>
            <el-table-column prop="remark" label="备注" align="left" header-align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120px" align="center">
              <template v-slot="scope">
                <elm-open-button url="settle_in_edit" title="编辑" width="900" height="90%" :data="{ model: scope.row }" type="text">编辑</elm-open-button>
                <elm-delete-button  type="text" size="mini" url="/business/bms/settlement/Delete" :data="{ id: scope.row.id }">删除</elm-delete-button>
              </template>
            </el-table-column>
          </elm-table>
        </el-tab-pane>
        <el-tab-pane label="支出结算" name="settle_out">
          <elm-table ref="settle_out" url="/business/bms/settlement_zc/GetData" :post-data="postData" style="height: calc(100vh - 228px)">
            <el-table-column prop="js_code" label="结算编号" align="center" width="150"></el-table-column>
            <el-table-column prop="js_status" label="结算状态" align="center" width="80"></el-table-column>
            <el-table-column prop="js_amount" label="结算金额(万元)" align="center" width="120"></el-table-column>
            <el-table-column prop="js_date" label="结算时间" :formatter="formatDate" align="center" width="100"></el-table-column>
            <el-table-column prop="contract_id" label="所属合同" align="left" header-align="center"></el-table-column>
            <el-table-column prop="sk_person_name" label="跟进人" align="center"  width="120"></el-table-column>
            <el-table-column prop="remark" label="备注" align="left" header-align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120px" align="center">
              <template v-slot="scope">
                <elm-open-button url="settle_out_edit" title="编辑" width="900" height="90%" :data="{ model: scope.row }" type="text">编辑</elm-open-button>
                <elm-delete-button  type="text" size="mini" url="/business/bms/settlement_zc/Delete" :data="{ id: scope.row.id }">删除</elm-delete-button>
              </template>
            </el-table-column>
          </elm-table>
        </el-tab-pane>
      </el-tabs>
    </elm-page-tb>
  </div>

</template>

<script>

export default {
  extends: elmVueBase,
  data() {
    return {
      activeName: 'settle_in',
      postData: { remark: null}
    }
  },
  created() {
  },
  methods: {
  }
}
</script>
